<template>
	<view>
		<view class="carousel">
			<swiper circular="true" autoplay="true" duration="400" :indicator-dots="true"
				indicator-active-color="#e80909">
				<swiper-item class="swiper-item" v-for="item in List.pics">
					<view class="image-wrapper">
						<image lazy-load :src="item" class="loaded" mode="widthFix"
							style="width: 750rpx;height: 600rpx;" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="margin">
			<view class="title">
				{{List.product_name}}
			</view>
			<view class="d-flex" style="margin-bottom: 20rpx;">
				<view class="flex-1 price">￥{{List.member_price}} </view>
				<view class="Sold">已售：{{List.sell_num}}</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="margin d-flex fs28 ls2" style="height: 90rpx;margin-bottom: 20rpx;" @tap="show">
			<view class="m-3 gray ">规格</view>
			<view class="m-3 flex-1">{{List.parameter}}</view>
			<image class="m-3  mt-4" src="@/static/img/user/right.png" mode="widthFix"
				style="width: 12rpx; height: 10rpx;"></image>
		</view>
		<!-- 配送服务 -->
		<view class="margin fs28">
			<view class="d-flex fs28">
				<view class="mt-2 ml-2  gray">配送</view>
				<view class="ml-2 mt-2 bor">{{List.shipping}}</view>
				<view class=" ml-2 mt-2 fs28 ls2">现在下单，最快19:09送达</view>
			</view>
			<view class="d-flex">
				<view class="mt-2 ml-2 gray">服务</view>
				<view class="ml-2 mt-2">{{List.security}}</view>
			</view>
			<view class="d-flex" style="margin-bottom: 20rpx;">
				<view class="mt-2 ml-2 gray mb-1">发票</view>
				<view class="ml-2 mt-2">可开具增值税普通发票</view>

			</view>
		</view>
		<!-- 商品详情 -->
		<view class="margin ">
			<view class="" v-if="baseParameter">
				<view class="">
					<view class="pt-2 ml-2 gray">产品参数</view>
					<view class="b"></view>
				</view>
				<view class="d-flex fs28 mt-2" v-for="base in baseParameter">
					<view class=" ml-2  gray ls2">{{base.key}}</view>
					<view class="ml-2">{{base.value}}</view>
				</view>
				<view style="height: 20rpx;"></view>
			</view>

			<!--/////////////////////////////////////////////////////// -->
			<!-- <view class="" v-if="grapeVariety">
				<view class="">
					<view class="b"></view>
					<view class="pt-2 ml-2 gray">葡萄品种</view>
					<view class="b"></view>
				</view>
				<view class="d-flex fs24" v-for="grape in grapeVariety">
					<view class="ml-2 mt-2">{{grape.key}}</view>
				</view>
			</view> -->

			<!--/////////////////////////////////////////////////////// -->
			<!-- <view class="" v-if="wineTaster">
				<view class="">
					<view class="b"></view>
					<view class="pt-2 ml-2 gray">品酒</view>
					<view class="b"></view>
				</view>
				<view class="d-flex fs28" v-for="wine in wineTaster">
					<view class="mt-2 ml-2 gray ls2">{{wine.key}}</view>
					<view class="ml-2 mt-2 ">{{wine.value}}</view>
				</view>
			</view> -->

			<!--///////////////////////////////////////////////////////-->
			<!-- <view class="" v-if="packages">
				<view class="">
					<view class="b"></view>
					<view class="pt-2 ml-2 gray">包装规格</view>
					<view class="b"></view>
				</view>
				<view class="d-flex fs28" v-for="pack in packages">
					<view class="mt-2 ml-2 gray ls2">{{pack.key}}</view>
					<view class="ml-2 mt-2 ">{{pack.value}}</view>
				</view>
			</view> -->

		</view>
		<!-- 底部菜单栏 -->
		<view class="action-section ">
			<view class="d-flex fs28 ">
				<view class="d-flex flex-column  collects ml-2 mt-2" @tap="changeCollect">
					<image class="ml-1"
						:src=" isCollectProduct? '/static/img/cate/souchang1.png':'/static/img/cate/souchang.png' "
						mode="widthFix" style="width: 35rpx; margin: 0 auto;">
					</image>
					<view v-if="isCollectProduct">已收藏</view>
					<view v-else>收藏</view>
				</view>
				<!-- <view class="d-flex flex-column mt-2 ml-3 collects" @click="open">
					<image class="ml-1" src="@/static/img/cate/fenxiang.png" mode="widthFix"
						style="width: 35rpx; margin: 0 auto;">
					</image>
					<view class=" ls2">分享</view>
				</view> -->
			</view>
			<view class="d-flex btn3">
				<view class="btn6" @tap="addCart">加入购物车</view>
				<view class="btn4" @tap="buyCart">立即购买</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<!-- 分享弹出层 -->
		<view class="share-class" v-if="showShare">
			<view class="share-content" style="">
				<view class="">
					<view class="search">分享</view>
					<view class="bb"></view>
				</view>
				<view class="d-flex">
					<view class="vx" @tap="haoyou">
						<image src="@/static/img/cate/vx.jpg" mode="widthFix" style="width: 102rpx;" />
						<view class="">微信</view>
					</view>
					<view class="vx" @tap="pengyouquan">
						<image src="@/static/img/cate/pyq.jpg" mode="widthFix" style="width: 102rpx;" />
						<view class="">朋友圈</view>
					</view>
					<view class="vx" @tap="copyUrl">
						<image src="@/static/img/cate/qq.jpg" mode="widthFix" style="width: 102rpx;" />
						<view class="">复制链接</view>
					</view>
				</view>
				<view class="bb"></view>
				<view class="">
					<button class="btn1" @tap="Hide">取消</button>
				</view>
			</view>
		</view>

		<!-- 规格弹出层 -->
		<view class="_popup" :class="popupClass">
			<view class="_mask" @tap.stop="hide"></view>
			<view class="_body">
				<view>
					<view class=" d-flex" style="margin-bottom: 20rpx;">
						<view class="list">
							<image class="list-image" :src="defaultGuige.cover_ico" mode="widthFix"></image>
						</view>
						<view class="d-flex flex-column flex-1">
							<view class="popup-title ">{{defaultGuige.product_name}}</view>
							<view class="popup-price ">￥{{defaultGuige.member_price}} </view>
						</view>
						<image @tap="hide" src="@/static/img/cate/false.png" mode="widthFix" style="width: 25rpx;"
							class="m-3"></image>
					</view>

					<view class="" style="border-bottom: 2rpx solid #eaeaea;"></view>

					<view class="">
						<view class="m-3 ls2 fs28">规格:</view>
						<view class="d-flex flex-wrap">
							<view class="fs28 ml-5 popup-ml" v-for="(isitem,index) in guige" :key="index"
								:class="{active:isitem.id === defaultGuige.id}" @tap="changeAttr(index)">
								{{isitem.value}}
							</view>

							<view class="clear"></view>
						</view>

					</view>

					<view class="" style="border-bottom: 2rpx solid #eaeaea;padding-bottom: 30rpx;"></view>

					<view class="d-flex">
						<view class="m-3 ls2 fs28">购买数量:</view>
						<view class="d-flex Quantity j-sa">
							<view class="jian" @tap="changeNum(-1)">-</view>
							<view class="one">{{number}}</view>
							<view class="jia" @tap="changeNum(1)">+</view>
							<!-- <uni-number-box :min="1"></uni-number-box> -->
						</view>
					</view>
					<view style="display: flex;padding: 50upx 30upx;">
						<view class="btn mr-2"
							style="background-color: white;color: #e80909;border: 1rpx solid #e80909;" @tap="addCart">
							加入购物车</view>
						<view class="btn" @tap="buyCart">立即购买</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				number: 1,
				popupClass: 'none',
				id: 0,
				List: {},
				baseParameter: [],
				grapeVariety: [],
				wineTaster: [],
				packages: [],
				parameterId: 0,
				isCollectProduct: false,
				defaultGuige: {},
				guige: [],
				skuList: [],
				showShare: false,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.detail()

			if (this.hasLogin) {
				this.addShopBrowser()
				this.isCollect()
			}
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			// 分享弹出层
			Hide() {
				this.showShare = false
			},
			open() {
				this.showShare = true
			},
			// 规格弹出层
			hide() {
				this.popupClass = 'hide'
				this.number = 1
				setTimeout(() => {
					this.popupClass = "none"
				}, 500)
			},
			show() {
				this.getAllAttrs()
			},

			changeNum(num) {
				this.number = parseInt(this.number) + parseInt(num)
				if (this.number < 1) {
					this.number = 1
				} else if (this.number > 999) {
					this.number = 999
				}
			},
			// 详情
			async detail() {
				let Detail = await this.$myRequest({
					url: '/detail',
					data: {
						id: this.id
					}
				})
				if (Detail.data.status == 1) {
					this.List = Detail.data.data
					this.baseParameter = Detail.data.data.base_parameter
					this.grapeVariety = Detail.data.data.grape_variety
					this.wineTaster = Detail.data.data.wine_taster
					this.packages = Detail.data.data.package
					this.parameterId = this.List.parameter_id
				}
			},
			// 浏览
			async addShopBrowser() {
				let addShop = await this.$myRequest({
					url: '/addShopBrowser',
					methods: 'POST',
					data: {
						id: this.id,
						token: uni.getStorageSync('token'),
					}
				})
			},
			// 是否已收藏
			async isCollect() {
				let isCollect = await this.$myRequest({
					url: '/isCollect',
					data: {
						token: uni.getStorageSync('token'),
						id: this.id
					}
				})

				if (isCollect.data.status == 1) {
					this.isCollectProduct = isCollect.data.data
				}

			},
			// 添加取消收藏
			async changeCollect() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}
				let changeCollect = await this.$myRequest({
					url: '/changeCollect',
					methods: 'POST',
					data: {
						id: this.id,
						token: uni.getStorageSync('token')
					}
				})

				if (changeCollect.data.status == 1) {
					this.isCollectProduct = !this.isCollectProduct
				}
			},
			// 添加商品进入购物车
			async addCart() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}

				if (this.parameterId <= 0) {
					this.$api.msg('尚未选择规格！')
					return false
				}

				if (this.number > this.defaultGuige.number) {
					this.$api.msg('商品余量不足！')
					return false
				}

				let res = await this.$myRequest({
					url: '/addCart',
					methods: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						parameter_id: this.parameterId,
						number: this.number
					}
				})


				if (res.data.status == 1) {
					this.$api.msg(res.data.msg)
					uni.$emit('changeCartList');
				}
			},

			// 立即购买
			async buyCart() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}

				if (this.parameterId <= 0) {
					this.$api.msg('尚未选择规格！')
					return false
				}

				if (this.number > this.defaultGuige.number) {
					this.$api.msg('商品余量不足！')
					return false
				}

				let paramArr = []
				let param = {
					parameter_id: this.parameterId,
					number: this.number
				}

				paramArr.push(param)

				let dataObj = {
					token: uni.getStorageSync('token'),
					data: JSON.stringify(paramArr)
				}

				let res = await this.$myRequest({
					url: '/order',
					methods: 'POST',
					data: dataObj
				})

				if (res.data.status == 1) {
					this.$api.msg('去创建订单');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/cart/order?tag=' + res.data.data
						})
					}, 500)
				}
			},

			// 商品规格
			async getAllAttrs() {
				let getAll = await this.$myRequest({
					url: '/getAllAttrs',
					data: {
						id: this.id
					}
				})
				if (getAll.data.status == 1) {
					this.guige = getAll.data.data.list
					this.defaultGuige = getAll.data.data.info
					this.popupClass = 'show'
				}
			},

			changeAttr(index) {
				this.defaultGuige = this.guige[index]
				this.parameterId = this.defaultGuige.id
			},

			HiddenClick() {
				this.ShowHidden = !this.ShowHidden
			},
			
			async haoyou() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.webUrl + "pages6/pages/my/my",
					title: this.List.product_name,
					summary: "好友分享",
					imageUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png",
					success: (res) => {
						this.$api.msg('分享成功', 'success');
					},
					fail: (err) => {
						this.$api.msg(JSON.stringify(err));
					}
				});
			},
		},
	}
</script>
<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style lang="scss">
	.btns {
		background-color: white;
	}

	.collects {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.share-class {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 300;
	}

	.share-content {
		position: fixed;
		bottom: 0px;
		width: 100%;
		background: #fff;
	}

	.b {
		border-bottom: 2rpx solid #eaeaea;
		padding-bottom: 20rpx;

	}

	._popup,
	._mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}

	._popup {
		z-index: 300;
		display: none;
	}

	._mask {
		z-index: 199;
		background: rgba(0, 0, 0, 0.5);
	}

	._popup ._body {
		position: fixed;
		bottom: -800rpx;
		width: 100%;
		height: 800rpx;
		z-index: 200;
		border-radius: 20rpx 20rpx 0 0;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	._popup1 ._body1 {
		bottom: -510rpx;
		height: 510rpx;
	}

	._popup.show {
		display: block;
	}

	.show ._mask {
		animation: showPopupMask 0.2S linear both;
	}

	.show ._body {
		animation: showPopupBody 0.2S linear both;
	}

	._popup.hide {
		display: block;
	}

	.hide ._mask {
		animation: hidePopupMask 0.2S linear both;
	}

	.hide ._body {
		animation: hidePopupBody 0.2S linear both;
	}

	@keyframes showPopupBody {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hidePopupBody {
		0% {
			opacity: translateY(-100%);
		}

		100% {
			opacity: translateY(0);
		}
	}

	@keyframes showPopupMask {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopupMask {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	._popup.none {
		display: none;
	}

	.hover {
		opacity: 0.6;

	}

	.carousel {
		height: 600upx;
		position: relative;
		background-color: white;
		margin-bottom: 20rpx;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 600upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				margin: 10rpx auto;
			}
		}
	}

	.margin {
		width: 94%;
		margin: 0 auto;
		height: 100%;
		background-color: white;
		border-radius: 20rpx;
		height: 100%;

		.title {
			margin: 30rpx 20rpx 20rpx 20rpx;
			padding: 20rpx 0 0 0;
			letter-spacing: 3rpx;
			// font-size: 28rpx;
			margin-top: 20rpx;
		}

		.price {
			color: #e80909;
			font-size: 28rpx;
			letter-spacing: 3rpx;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
		}

		.Sold {
			margin-right: 20rpx;
			color: #999;
			letter-spacing: 3rpx;
			font-size: 26rpx;
		}
	}

	.hover {
		opacity: 0.6;
	}

	.btn1 {
		border-radius: 50rpx;
		margin: 0 20rpx;
		letter-spacing: 2rpx;
		background-color: #f5f5f5;
		margin-top: 40rpx;
	}

	.search {
		text-align: center;
		margin: 35rpx 0;
	}

	.vx {
		width: 235rpx;
		margin: 40rpx auto;
		text-align: center;

	}

	.bb {
		border-bottom: 1px solid #f5f5f5;
	}

	.btn4 {
		// background-color: #e80909;
		color: white;
		margin-left: 100rpx;
	}

	.btn3 {
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 1.0) 230rpx, rgba(199, 9, 8, 1.0)10rpx);
		min-width: 100rpx;
		border: 1rpx solid #e80909;
		border-radius: 50rpx;
		padding: 10rpx 50rpx;
		font-size: 28rpx;
		margin-right: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.action-section {
		height: 110upx;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		bottom: 0;
		/* #ifdef H5 */
		// bottom: 100upx;
		/* #endif */
		position: fixed;
		/* bottom: 30upx; */
		z-index: 95;
		display: flex;
		align-items: center;
		height: 100upx;
		// padding: 0 38upx 0 40upx;
		background: #FFFFFF;
	}

	.btn {
		background-color: #d10807;
		color: white;
		border-radius: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		letter-spacing: 2upx;
		width: 50%;
	}

	.Quantity {
		border: 2rpx solid #eaeaea;

		height: 60rpx;
		width: 180rpx;
		line-height: 50rpx;

		border-radius: 10rpx;
		margin-top: 20rpx;

		.jian,
		.jia {
			padding: 0 20rpx;
		}

		.one {
			margin: 0 20rpx;
		}

		.jian {
			border-right: 2rpx solid #eaeaea;
			// margin-top: -5rpx;
		}

		.jia {
			border-left: 2rpx solid #eaeaea;
			// margin-top: -5rpx;
		}
	}

	.one {}

	.popup-ml {
		color: #333;
		border: 1px solid #bdbdbd;
		padding: 10rpx 20rpx;
		width: 180rpx;
		border-radius: 10rpx;
		float: left;
		// justify-content: space-around;
		margin-left: 30upx;
		margin-top: 10rpx;
		text-align: center;
	}

	.active {
		background-color: #d10807;
		color: white;
		border: none;
	}

	.popup-title {
		color: #d2090a;
		// font-size: 28rpx;
		margin: 20rpx 0 40rpx 10rpx;
		letter-spacing: 2rpx;
	}

	.popup-price {
		margin: 10rpx 0 0 10rpx;
		color: #d30905;
	}

	.clear {
		clear: both;
	}

	.list {
		// margin: 0 0 0 20rpx;
		// width: 150rpx;
		// height: 150rpx;
		// border: 2rpx solid #bdbdbd;
		// margin-top: 30rpx;
		// border-radius: 20rpx;

		.list-image {
			width: 135rpx;
			height: 160rpx;
			margin: 10rpx;
		}
	}
</style>
